// ignore_for_file: file_names

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class DemoComp extends StatelessWidget {
  const DemoComp({super.key});

  @override
  Widget build(BuildContext context) {
    // 1. 提供的数据
    const Map orderInfo = {
      'createTime': "2024-08-15 21:49:48",
      'orderState': "待发货",
      'image':
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      'name': "茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯",
      'totalNum': 2,
      'curPrice': 119.5,
      'attrsText': "规格: 白色240ml"
    };

    return Scaffold(
        appBar:
            AppBar(title: const Text('案例-商品订单信息'), backgroundColor: Colors.red),
        body: Container(
          padding: const EdgeInsets.all(10),
          color: Colors.white,
          child: Column(
            children: [
              // 1. 订单时间和订单状态
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // 1.1 创建时间
                  Text(
                    orderInfo['createTime'],
                    style: const TextStyle(
                        color: Color.fromARGB(255, 70, 69, 69), fontSize: 13),
                  ),
                  // 1.2 订单状态
                  Text(
                    orderInfo['orderState'],
                    style: const TextStyle(color: Colors.orange),
                  )
                ],
              ),
              // 2. 商品图片+名称+数量+规格+单价
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Row(
                  children: [
                    // 2.1 左侧商品图片
                    Image.network(
                      'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg',
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                    ),
                    // 2.2 右侧: 名称+数量+规格+单价
                    Expanded(
                        child: Padding(
                      padding: const EdgeInsets.only(left: 10),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // 2.2.1 名称+数量
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              // 名称
                              Expanded(child: Text(orderInfo['name'])),
                              // 数量
                              Padding(
                                padding: const EdgeInsets.only(left: 10),
                                child: Text('x ${orderInfo['totalNum']}'),
                              )
                            ],
                          ),
                          // 2.2.2 规格
                          Padding(
                            padding: const EdgeInsets.only(top: 5),
                            child: Container(
                              padding: const EdgeInsets.only(
                                  left: 5, right: 5, top: 3, bottom: 3),
                              decoration: BoxDecoration(
                                  color:
                                      const Color.fromARGB(255, 249, 247, 247),
                                  borderRadius: BorderRadius.circular(10)),
                              child: Text(
                                orderInfo['attrsText'],
                                style: const TextStyle(color: Colors.grey),
                              ),
                            ),
                          ),
                          // 2.2.3 价格
                          Padding(
                            padding: const EdgeInsets.only(top: 5),
                            child: Text('¥${orderInfo['curPrice']}'),
                          ),
                        ],
                      ),
                    ))
                  ],
                ),
              ),
              // 3. 合计
              Padding(
                  padding: const EdgeInsets.only(top: 10),
                  child: Container(
                    alignment: Alignment.centerRight,
                    child: Text(
                        '合计: ¥ ${orderInfo['curPrice'] * orderInfo['totalNum']}'),
                  )),
              // 4. 再次购买
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Container(
                  alignment: Alignment.centerRight,
                  child: Container(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 3, vertical: 5),
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: const Color.fromARGB(255, 41, 40, 40))),
                    child: const Text(
                      '再次购买',
                      style: TextStyle(color: Color.fromARGB(255, 68, 68, 68)),
                    ),
                  ),
                ),
              )
            ],
          ),
        ));
  }
}
